<!-- 公众号小程序授权页面 -->
<template>
  <div class="app-main-content-box">
    <div class="auth-container">
      <div class="title clearfix">
        <div class="fl">
          <strong>小程序授权</strong>
        </div>
        <div class="fr">
          <el-button v-if="ma" size="medium" round type="primary" @click="getAuthUrl(2)">重新授权</el-button>
          <el-button v-else size="medium" round type="success" @click="getAuthUrl(2)">申请授权</el-button>
        </div>
      </div>

      <div class="content">
        <div v-if="!ma" class="noAuth">暂未授权，你需要先进行小程序授权后才可以使用相关功能</div>
        <el-form v-else label-width="100px" size="small">
          <el-form-item label="小程序状态：">
            <el-tag v-if="ma.base.state === 1" type="success">已授权</el-tag>
            <el-tag v-if="ma.base.state === 0" type="danger">授权异常</el-tag>
            <div v-if="ma.base.state === 0">
              <el-alert
                style="width: 300px; margin-top: 10px; padding: 5px 5px"
                :closable="false"
                :title="ma.base.remark"
                type="error"
              />
            </div>
          </el-form-item>

          <el-form-item label="小程序名称：">
            <div>{{ ma.info.nickName }}</div>
          </el-form-item>
          <el-form-item label="appId：">
            <div>{{ ma.base.appId }}</div>
          </el-form-item>
          <el-form-item label="已授予权限：">
            <div>{{ ma.permsStr }}</div>
          </el-form-item>
          <el-form-item v-if="ma.missingPermsStr" style="color: crimson" label="缺少权限：">
            <div>{{ ma.missingPermsStr }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getWechatAuthUrl, checkAuth } from '@/api/wechat.js'

export default {
  data() {
    return {
      // mp: null,
      // ma: null
    }
  },

  computed: {
    ...mapGetters(['mp', 'ma'])
  },

  mounted() {
    this.getAuthInfo()
    this.checkAuthResult()
  },

  methods: {
    /**
       *  获取数据
       */
    ...mapActions(['getAuthMp', 'getAuthMa']),
    // 检查结果
    checkAuthResult() {
      const preAuthCode = this.$route.query['preAuthCode']
      if (!preAuthCode || localStorage.getItem(preAuthCode)) return
      this.check(preAuthCode)
    },

    // 获取授权数据
    getAuthInfo() {
      this.getAuthMp()
      this.getAuthMa()
    },

    check(preAuthCode) {
      // 重新获取数据
      // todo 根据预授权码查询授权状态, 可能要遍历查询, 后台有延迟
      checkAuth(preAuthCode).then(res => {
        this.getAuthInfo()
        if (res.data.state === 1) {
          // 授权成功
          localStorage.setItem(preAuthCode, 'check')
          this.$notify({
            title: '成功',
            message: '授权成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        } else if (res.data.state === 0) {
          // 授权未完成
        } else if (res.data.state === 2) {
          // 授权失败
          const reason = res.data.reason
          localStorage.setItem(preAuthCode, 'check')
          this.$alert(reason, '授权异常', {
            confirmButtonText: '确定',
            type: 'error',
            center: true,
            callback: action => {}
          })
        }
      })
    },

    /**
       *  按钮组
       */
    // 申请授权
    getAuthUrl(authType) {
      getWechatAuthUrl({ authType }).then(res => {
        // 预授权码
        window.location.href = res.data.url
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .auth-container {
    margin-bottom: 20px;
    border: 1px solid #f2f2f2;
    border-radius: 5px;
    .title {
      padding: 5px 10px;
      height: 40px;
      line-height: 40x;
      border-radius: 5px;
      background: #eceff1;
      .fl {
        line-height: 30px;
      }
      span {
        font-size: 20px;
      }
      .el-button {
        height: 30px;
        line-height: 0;
      }
    }
    .content {
      padding: 5px 10px;
      .noAuth {
        text-align: center;
        height: 100px;
        line-height: 100px;
      }
      .el-row {
        margin: 5px;
      }
    }
  }
</style>

